<style lang="less" rel="stylesheet/less" scoped>    
    .bookinfo{
        margin: 0.2rem;
        font-size: 0.28rem;
        // 简介
        .book-top{
            padding-bottom: 0.2rem;
            align-items:center;
            border-bottom: 1px solid #bbbbbb;
            .book-img{
                width: 30vw;
            }
            .book-info{
                margin-left: 0.3rem;
                .book-name{
                    font-size: 0.32rem;
                    font-weight: bold;
                }
                .book-user{
                    font-size: 0.3rem;
                    // color: #4cd658;
                }
                .book-score{
                    font-size: 0.3rem;
                    line-height: 0.6rem;
                    span{
                        font-size: 0.34rem;
                        color: aqua;
                        font-style: italic;
                        line-height:0.8rem;
                    }
                    .package{
                        padding: 0.2rem;
                        margin-left: 0.2rem;
                        font-style: normal;
                        color: #333333;
                    }   
                }
            }
        }
        // 书籍信息
        .book-inner{
            border-bottom: 1px solid #bbbbbb;
            p{
                font-size: 0.3rem;
            }
            ul{
                li{
                    line-height: 0.5rem;
                    span{
                        margin-right: 0.4rem;
                    }
                }
            }
        }
        // 加入书包
        .add-package{
            display: block;
            width: 70vw;
            margin: 0.5rem auto;
            background-color: #078301;
            font-size: 0.3rem;
            color: #ffffff;
            line-height: 0.6rem;
            border-radius: 3px;
        }
        
    }



</style>
<template>
    <div class="bookinfo">
        <!-- 简介 -->
        <div class="box-left book-top">
            <img :src="bookinfo.img" :alt="bookinfo.name" class="book-img">
            <ul class="box-direction book-info" >
                <li class="book-name">{{ bookinfo.name }}</li>
                <li class="book-user">{{ bookinfo.user }}</li>
                <li class="book-score">评分:<span>{{ bookinfo.score }}</span><span class="package">收藏</span></li>
                <li><span>剩余册数:{{ bookinfo.inventory }}</span><span></span></li>
                <li>累计借阅次数:{{ bookinfo.number }}</li>
            </ul>
        </div>
        <!-- 书籍信息 -->
        <div class="book-inner">
            <p>书籍信息:</p>
            <ul l class="box-direction">
                <li><span>出版社:江苏文艺出版社</span><span>定价:￥36.00</span></li>
                <li><span>出版日期:2017.02.01</span><span>ISBN:85123365451</span></li>
                <li>所属分类:中小学教辅>中小学阅读>新课标</li>
            </ul>
        </div>
        <!-- 内容简介 -->
        <div>
            <p>内容简介：</p>
            <p>《钢铁是怎样炼成的》于1933年写成，是一部以苏维埃革命为背景的史诗性长篇小说。作者把自己作为主人公的原型，但并不是自传，成功塑造了青年布尔什维克保尔·柯察金的英雄形象。       年少的保尔因闯祸被开除学籍，在生活的逼迫下，不得不走入“人间”。艰苦的生活，繁重的劳动，赤裸裸的弱肉强食，黑暗的社会底层，考验并磨砺着这位性情倔强的少年。</p>
        </div>
    <!-- 页脚 -->
        <button class="add-package" @click="pathTo()">加入书包</button>    
    
    </div>
</template>

<script>
    import p3 from '../../assets/img/p3.jpg'

    export default {
        name: '',
        //数据
        data() {
            return {
                bookinfo:{
                    img:p3,name:'橘子不是唯一的水果',user:'珍妮特·温特森',score:'8.6',inventory:'5',number:'156'
                },
            }
        },
         //计算属性
        computed:{
           
        },
        //组件
        components: {},
        //初始化数据
        mounted() {
            
        },
        //方法
        methods: {
            pathTo(){
                this.$router.replace( {name:"Package"});
            }
        },
        //监听数据变化
        watch: {
          '$route' (to, from) {
          }
        }
    }
</script>
